<template>
	<view style="padding-bottom: 120rpx;">
		<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 20rpx;margin: 20rpx;">
			<u-swiper height="200" :list="newPicList" indicator :autoplay="true" circular @click="swiperClick"></u-swiper>
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx;">
				<view style="width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
					<image style="width: 100%;height: 100%;" :src="avatar"></image>
				</view>
				<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
					<view style="font-size: 28rpx;">
						{{detailData.nickname}}
					</view>
					<view style="font-size: 26rpx;color: #909399;">
						{{detailData.newTime}}
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view style="padding: 30rpx;">
				<view style="font-size: 32rpx;margin-bottom: 20rpx;font-weight: bold;">
					{{detailData.newTitle}}
				</view>
				<view style="font-size: 28rpx;">
					{{delTag(detailData.newContent)}}
				</view>
			</view>
			<view>
				<view style="display: flex;justify-content: space-between;padding: 0 30rpx 30rpx 30rpx;">
					<view style="display: flex;justify-content: start;">
						<u-icon name="map" color="#20C3FE"></u-icon>
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{detailData.address}}</view>
					</view>
					<view style="display: flex;">
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{detailData.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#ff5500" name="thumb-up"></u-icon>
							<text>{{detailData.up}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="more-circle" color="#ffaa00"></u-icon>
							<text>{{detailData.comments}}</text>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view style="padding: 30rpx;">
					<view style="margin-bottom: 20rpx;">
						<text style="font-weight: bold;color: #20C3FE;border-bottom: 4rpx solid #20C3FE;font-size: 32rpx;">评论区</text>
					</view>
					<view style="display: flex;margin-bottom: 20rpx;" v-for="(item,index) in commentList" :key="index">
						<view style="width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
							<image style="width: 100%;height: 100%;" :src="avatar"></image>
						</view>
						<view style="flex: 1;">
							<view style="height: 80rpx;display: flex;align-items: center;justify-content: space-between;">
								<view style="display: flex;flex-direction: column;width: 50%;">
									<view style="font-size: 26rpx;">
										{{item.nickname}}
									</view>
									<view style="font-size: 26rpx;color: #909399;">{{item.createTime}}</view>
								</view>
								<view style="display: flex;width: 50%;align-items: center;justify-content: flex-end;">
									<view @click="clickCommentZan(item)" style="display: flex;">
										<u-icon name="thumb-up" :color="item.updateBy?'#20C3FE':'#7c7c7c'"></u-icon>
										<text style="color: #909399;">{{item.up}}</text>
									</view>
									<view @click="clickCommentCai(item)" style="display: flex;margin-left: 20rpx;">
										<u-icon name="thumb-down" :color="item.createBy?'#20C3FE':'#7c7c7c'"></u-icon>
										<text style="color: #909399;">{{item.down}}</text>
									</view>
								</view>
							</view>
							<view>
								<text style="font-size: 26rpx;">{{item.content}}</text>
							</view>
							<view v-if="item.replies !== 0" style="display: flex;align-items: center;" @click="openReply(item)">
								<text style="font-size: 26rpx;color: #909399;">{{item.replies}}条回复</text>
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		
		<view style="padding: 10rpx 0;display: flex;width: 100%;height: 80rpx;position: fixed;bottom: 0;background-color: #fff;align-items: center;border-top: 2rpx solid #d6d7d9;">
			<view style="padding-left: 20rpx;flex: 1;">
				<u-input v-model="writeContent" type="text" placeholder="说点好听的..." confirmType="评论" @confirm="writeComment"></u-input>
			</view>
			<view style="margin-left: 20rpx;justify-content: flex-end;display: flex;align-items: center;line-height: 80rpx;padding-right: 20rpx;">
				<view>
					<u-icon name="thumb-up" size="24" @click="clickZan()" :color="status.societyZan?'#20C3FE':'#909399'"></u-icon>
				</view>
				<view>
					<u-icon class="icon" name="thumb-down" size="24" @click="clickCai()" :color="status.societyCai?'#20C3FE':'#909399'"></u-icon>
				</view>
				<view>
					<u-icon class="icon" name="star" size="24" @click="clickCollect()" :color="status.societyCollect?'#20C3FE':'#909399'"></u-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// 社会资讯详情界面
	import {
		getSocietyById,
		writeComment,
		getPCommentById,
		societyZan,
		societyZanCancel,
		societyCai,
		societyCaiCancel,
		societyCommentZan,
		societyCommentZanCancel,
		societyCommentCai,
		societyCommentCaiCancel,
		getActivityUserStatus,
		societyCollectCancel,
		societyCollect
	} from '../../config/api'
	import {
		mapGetters
	} from 'vuex'
	// const baseUrl = 'http://localhost:8080'
	export default {
		data() {
			return {
				id: '',
				detailData: {},
				avatar: '',
				newPicList: [],
				s: [],
				writeContent: '',
				commentList: [],
				status: {},
				currentTime: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.init();

		},
		onShow() {
			this.init();
		},
		computed: {
			...mapGetters(['getIsLogin', 'getUserinfo', 'getBaseUrl']),
		},
		methods: {
			init() {
				getSocietyById({
					id: this.id
				}).then(res => {
					this.detailData = res.data.data;
					if (res.data.data.newPic != null && res.data.data.newPic != '') {
						this.s = res.data.data.newPic.split(",");
						this.newPicList = this.s.map((item, index) => {
							return this.getBaseUrl + item
						});
					}
					if (res.data.data.label != null && res.data.data.label != '') {
						this.tags = res.data.data.label.split(",");
					}
					this.avatarImg(res.data.data.avatar)
				})
				getPCommentById({
					sid: this.id,
					isWho: 1
				}).then(res => {

					this.commentList = res.data.data
					if (this.getIsLogin) {
						getActivityUserStatus({
							sid: this.id,
							isWho: 1
						}).then(res => {
							this.status = res.data.data
							this.commentList.map((item, index) => {
								this.status.societyCommentZan[index] ? item.updateBy = true : item
									.updateBy = false
								this.status.societyCommentTread[index] ? item.createBy = true :
									item.createBy = false
								return item
							})
						})
					}

				})

			},
			// 用户头像
			avatarImg(image) {
				if (image.indexOf('http') != -1) {
					this.avatar = image
				} else {
					this.avatar = 'http://localhost:8080' + this.detailData.avatar
				}
			},
			// 点击图片
			swiperClick(i) {
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.newPicList
				})
			},
			//移除HTML标签
			delTag(str) {
				return str.replace(/<[^>]+>/g, "");
			},
			// 当前时间
			getCurrentTime() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				this.currentTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			// 写评论
			// 评论
			writeComment() {
				if (this.getIsLogin) {
					var obj = {
						avatar: this.getUserinfo.avatar,
						nickname: this.getUserinfo.nickname,
						createTime: '刚刚',
						content: this.writeContent,
						up: 0,
						down: 0,
						replies: 0
					}
					this.commentList.push(obj)
					writeComment({
						sid: this.id,
						pid: 0,
						isWho: 1,
						content: this.writeContent
					}).then(res => {

						if (res.data.msg === '评论成功') {
							this.writeContent = ''
							this.$refs.uToast.show({
								type: 'success',
								message: '评论成功'
							})
						} else {
							this.writeContent = ''
							this.$refs.uToast.show({
								type: 'warning',
								message: '网络出了点小问题'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)

				}

			},
			// 点赞
			clickZan() {
				if (this.getIsLogin) {
					console.log("你点了赞")
					// this.status.societyZan 默认1是真 0是假
					if (this.status.societyZan) {
						console.log("取消点赞");
						//取消点赞
						societyZanCancel({
							sid: this.id
						}).then(res => {
							if (res.data.msg == "取消点赞成功") {
								this.detailData.up--;
								this.status.societyZan = 0;
								this.$refs.uToast.show({
									type: 'warning',
									message: '取消点赞成功'
								})
							}
						})
					} else {
						console.log("点赞");
						//点赞
						societyZan({
							sid: this.id
						}).then(res => {
							if (res.data.msg == "点赞成功") {
								this.detailData.up++;
								this.status.societyZan = 1;
								if (this.status.societyCai) {
									this.status.societyCai = 0;
									this.detailData.down--
								}
								this.$refs.uToast.show({
									type: 'success',
									message: '点赞成功'
								})
							}
						})
					}
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}


			},
			// 点cai
			clickCai() {
				if (this.getIsLogin) {
					console.log("你点了踩");
					if (this.status.societyCai) {
						// 取消点踩
						societyCaiCancel({
							sid: this.id
						}).then(res => {
							this.status.societyCai = 0
							this.detailData.down--
							this.$refs.uToast.show({
								type: 'warning',
								message: '取消点踩成功'
							})
						})
					} else {
						// 点踩
						societyCai({
							sid: this.id
						}).then(res => {
							this.status.societyCai = 1
							this.detailData.down++
							if (this.status.societyZan) {
								this.status.societyZan = 0
								this.detailData.up--
							}
							this.$refs.uToast.show({
								type: 'success',
								message: '点踩成功'
							})
						})
					}
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}


			},
			// 收藏
			clickCollect() {
				if (this.getIsLogin) {
					console.log("点击收藏");
					if (this.status.societyCollect) {
						// 取消收藏
						societyCollectCancel({
							sid: this.id,
							collectType: '社会资讯'
						}).then(res => {
							this.status.societyCollect = 0
							this.detailData.collect--
							this.$refs.uToast.show({
								type: 'warning',
								message: '取消收藏成功'
							})
						})
					} else {
						// 收藏
						societyCollect({
							sid: this.id
						}).then(res => {
							this.status.societyCollect = 1
							this.detailData.collect++
							this.$refs.uToast.show({
								type: 'success',
								message: '收藏成功'
							})
						})
					}
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}

			},
			// 点赞评论
			clickCommentZan(item) {
				if (this.getIsLogin) {
					console.log("你点了评论赞++", item.id)
					// updateBy 和updateTime暂时用不上，将查询出来的状态赋值给它
					if (item.updateBy) {
						console.log("点击取消点赞");
						//取消点赞
						societyCommentZanCancel({
							id: item.id
						}).then(res => {
							if (res.data.msg == "取消点赞评论成功") {
								item.updateBy = false
								item.up--
								this.$refs.uToast.show({
									type: 'warning',
									message: '取消点赞成功'
								})
							} else {
								this.$refs.uToast.show({
									type: 'error',
									message: '取消点赞失败'
								})
							}

						})
					} else {
						//点赞
						console.log("点击点赞");
						societyCommentZan({
							id: item.id
						}).then(res => {
							if (res.data.msg == "点赞评论成功") {
								item.updateBy = true
								item.up++
								if (item.updateTime) {
									item.updateTime = false
									item.down--
								}
								this.$refs.uToast.show({
									type: 'success',
									message: '点赞成功'
								})
							} else {
								this.$refs.uToast.show({
									type: 'error',
									message: '点赞失败'
								})
							}
						})
					}
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}


			},
			// 点cai评论
			clickCommentCai(item) {
				if (this.getIsLogin) {
					console.log("你点了踩");
					if (item.updateTime) {
						//取消点踩
						societyCommentCaiCancel({
							id: item.id
						}).then(res => {
							if (res.data.msg == "取消点踩评论成功") {
								item.updateTime = false
								item.down--
								this.$refs.uToast.show({
									type: 'success',
									message: '取消点踩成功'
								})
							} else {
								this.$refs.uToast.show({
									type: 'warning',
									message: '取消点踩失败'
								})
							}

						})
					} else {
						//点踩
						societyCommentCai({
							id: item.id
						}).then(res => {
							if (res.data.msg == "点踩评论成功") {
								item.updateTime = true
								item.down++
								if (item.updateBy) {
									item.updateBy = false
									item.up--
								}
								this.$refs.uToast.show({
									type: 'success',
									message: '点踩成功'
								})
							} else {
								this.$refs.uToast.show({
									type: 'warning',
									message: '点踩失败'
								})
							}
						})
					}
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}


			},
			// 打开二级评论
			openReply(item) {
				console.log("item:", item);
				uni.navigateTo({
					url: `../detail/commentDetail?id=${item.id}&isWho=${item.isWho}`
				})

			}
		}
	}
</script>

<style scoped lang="scss">

</style>